<template>
  <div class="process-dialog">
    <el-dialog
      title="告警详情"
      :visible.sync="showDialog"
      width="40%"
      :before-close="handleClose"
      @update:showDialog="toggleDialog"
    >
      <el-form label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="资源编码:">
              <span>{{ detail.code }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="资源IP:">
              <span>{{ detail.instance }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="资源类型:">
              <span>{{ detail.resourceTypeName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="告警来源:">
              <span>{{ detail.monitorSrc | filterType }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="告警类别:">
              <span>{{ detail.alarmTypeName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="告警内容:">
              <span>{{ detail.description }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="告警级别:">
              <span>{{ detail.alarmLevelName }}</span>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="告警指标值:">
              <span>{{ detail.kpiValue }}</span>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="告警时间:">
              <span>{{ detail.startTime }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <!-- <el-col :span="12">
            <el-form-item label="最后告警时间:">
              <span>{{ detail.updateTime }}</span>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-form-item>
          <el-button @click="handleClose">关闭</el-button>
          <el-button type="primary" @click="goAlarmManage">告警管理</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  components: {},
  props: {
    //弹窗显、隐
    showDialog: {
      type: Boolean,
      default: false,
    },
    detail: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  filters: {
    filterType(type) {
      switch (type) {
        case "1":
          return "网";
        case "2":
          return "云";
        case "3":
          return "动环";
        default:
          return "网";
      }
    },
  },
  methods: {
    // 弹窗关闭
    handleClose() {
      this.toggleDialog();
    },
    toggleDialog(visible = false) {
      this.$emit("update:showDialog", visible);
    },
    goAlarmManage() {
      window.open(
        `http://10.163.208.184:18080/XICHENG/#/Alarm/alarmMonitor/timerAlarm`
      );
    },
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
</style>
